<template>
  <div class="list-container">
    <Back/>
    <div class="list-item" v-for="item in dataList" :key="item.id" @click="gotoListDetail(item)">
      {{item.name}}
    </div>
  </div>
</template>

<script>
import Back from '../../components/Back.vue'
export default {
  name: 'List',
  components:{
    Back
  },
  data(){
    return {
      dataList: []
    }
  },
  created(){
    this.dataList= new Array(30).fill('').map((v,i)=>({name:`LIST-${i}`,id:i}))
  },
  methods:{
    gotoListDetail(item){
      this.$router.push({
        path: '/listdetail/'+item.id
      })
    }
  }
}
</script>

<style>
.list-container{
  width: 100%;
  min-height: 100%;
}
.list-item{
  background-color: #ddd;
  padding: 20px 30px;
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>